<template>
	<div class="list">
		<view v-for="(item,index)  in total" :class="{'active': currrent === index }" :key="index" class="dot">
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			currrent: {
				type: Number,
				default: 0
			},
			total: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.dot{
		background-color:#DCDFE6;
		width:12rpx;
		height:12rpx;
		border-radius:6rpx;
		margin-right:12rpx;
	}
	.dot:last-child{
		margin-right:0rpx;
	}
	.active{
		background-color:#03D0B2;
	}
</style>
